<template>
  <div class="quantity-input">
    <el-input-number
      :model-value="modelValue"
      :placeholder="placeholder"
      :min="min"
      :max="max"
      :precision="precision"
      :step="step"
      :disabled="disabled"
      style="width: 100%"
      @update:model-value="handleUpdate"
    />
    <div class="quick-buttons">
      <el-button
        v-for="item in quickOptions"
        :key="item.value"
        size="small"
        type="primary"
        plain
        @click="handleQuickSelect(item.value)"
      >
        {{ item.label }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: "QuantityInput",
  inheritAttrs: false,
});

defineProps({
  modelValue: {
    type: Number,
    default: null,
  },
  placeholder: {
    type: String,
    default: "请输入数量",
  },
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: undefined,
  },
  precision: {
    type: Number,
    default: 0,
  },
  step: {
    type: Number,
    default: 1000,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

// 快捷选项
const quickOptions = [
  { label: "五百", value: 500 },
  { label: "一千", value: 1000 },
  { label: "五千", value: 5000 },
  { label: "一万", value: 10000 },
  { label: "两万", value: 20000 },
  { label: "五万", value: 50000 },
];

function handleUpdate(value) {
  emit("update:modelValue", value);
  emit("change", value);
}

function handleQuickSelect(value) {
  emit("update:modelValue", value);
  emit("change", value);
}
</script>

<style scoped lang="scss">
.quantity-input {
  width: 100%;

  .quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 8px;

    .el-button {
      font-size: 12px;
      padding: 4px 1px;
      height: auto;
      margin-left: 2px;
    }
  }
}
</style>
